CSS3基础知识学习笔记

共计 7842 个字符，预计需要花费 20 分钟才能阅读完成。

字体

字体族

a {font-family: Microsoft YaHei, Heiti SC, sans-serif;}

font-family 属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。

font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体族（Sans-Serif）。

通用字体族：

• Serif 衬线体
• Sans-Serif 无衬线体
• Cursive 手写体
• Fantasy 夸张体
• Monospace 等宽字体

使用 Web Fonts：

@font-face {
  font-family: 'CustomFont';
  src: url(https://example.com/CustomFont.woff2) format('woff2');
}

font 复合属性

复合属性连写的 font 格式：font:font-style font-weight font-size/line-height font-family;

必须按顺序书写，并且字号和字体值（后两个）必须书写，否则 font 属性不生效。

文本

行高

p {line-height: 1.6;}

空白符

white-space 属性设置如何处理元素内的空白，默认空白会被浏览器忽略。

值为 nowrap：文本不会换行，会在同一行上继续，直到遇到
标签为止。

值为 pre：空白会被保留，其行为方式类似 HTML 中的

标签。
值为 pre-wrap：保留空白符，正常换行。
值为 pre-line：合并空白符，保留换行符。
复合选择器 
 后代选择器 
 选中某元素的所有后代（包含儿子、孙子、重孙子），选择器之间用空格隔开。
/* 选中 div 下的 a 元素 */
div a {color: #000;}
子代选择器
选中某元素的子代元素（最近的子级），选择器之间用 > 隔开。
div > a {color: #000;}
并集选择器
选中多组标签设置相同的样式，选择器之间用逗号, 隔开。
div,
a {color: #000;}
交集选择器
选中同时满足多个条件的元素，选择器之间连写，没有任何符号。
div.box {color: #000;}
兄弟选择器
/* 选中 div 后相邻的兄弟 p 元素 */
div + p {color: green;}
/* 选中 div 后的所有兄弟 p 元素 */
div ~ p {color: green;}
属性选择器
/* 选中具有 title 属性的元素 */
[title] {color: green;}
/* 选中 title 属性值为 hello 的元素 */
[title="hello"] {color: green;}
/* 选中 title 属性值以 a 开头的元素 */
[title^="a"] {color: green;}
/* 选中 title 属性值以 a 结尾的元素 */
[title$="a"] {color: green;}
/* 选中 title 属性值包含 a 的元素 */
[title*="a"] {color: green;}
伪类选择器
伪类很像类，但不是类，是元素特殊状态的一种描述。伪类表示元素状态，选中元素的某个状态设置样式。
状态伪类
超链接一共有 4 个状态，给超链接设置状态时，需要按 LVHA（LV 哈）顺序书写。

:link 访问前
:visited 访问后
:hover 鼠标悬停
:active 点击时（激活）

结构伪类
根据元素的结构关系查找元素。

E:first-child 查找第一个 E 元素
E:last-child 查找最后一个 E 元素
E:nth-child(N) 查找第 N 个 E 元素（第一个元素 N 值为 1）
:first-of-type 所有同类型兄弟元素中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟元素中的第 n 个

nth-child(公式)用法：

2n：偶数标签
2n+1：奇数标签（或 2n-1）
5n：找到 5 的倍数的标签
n+5：找到第 5 个以后的标签（-n+ 5 为第 5 个以前的标签）

下面了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第 n 个
:only-child 选择没有兄弟的元素（独生子女）
:only-of-type 选择没有同类型兄弟的元素
:root 根元素
:empty 内容为空元素（空格也算内容）

否定伪类
:not(选择器) 排除满足括号中条件的元素。
UI 伪类

:checked 被选中的复选框或单选按钮
:enable 可用的表单元素（没有 disabled 属性）
:disabled 不可用的表单元素（有 disabled 属性）

目标伪类（了解）
:target 选中锚点指向的元素。
<style>
  div {
    background: gray;
    height: 300px;
  }
  div:target {background: green;}
</style>

<a href="#one"> 去看第 1 个 </a>
<a href="#two"> 去看第 2 个 </a>

<div id="one"> 第 1 个 </div>
<br />
<div id="two"> 第 2 个 </div>
语言伪类（了解）
:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。
伪元素选择器
作用：选中元素中的一些特殊位置。创建虚拟元素（伪元素），用来摆放装饰性的内容。

E::before 在 E 元素里面最前面添加一个伪元素
E::after 在 E 元素里面最后面添加一个伪元素
::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字

必须设置 content: " 内容 "; 属性，用来设置伪元素内容，如果没有内容，则内容留空即可。伪元素默认是行内显示模式，权重和标签选择器相同。
CSS 三大特性
继承性
子级默认继承父级的文字控制属性。
层叠性
相同的属性会覆盖，即后面的属性覆盖全面的属性。不同的属性会叠加，即不同的属性都生效。
优先级
也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
规则：选择器优先级高的样式生效。
公式：通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important
叠加计算
如果是复合选择器，则需要权重叠加计算。
公式：(行内样式，id 选择器个数，类选择器个数，标签选择器个数)
规则：从左往右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较。!important 权重最高，继承权重最低。
显示模式
块级（block）：独占一行；宽高属性生效；默认宽度是父级的 100%
行内（inline）：一行共存多个；宽高属性不生效；宽高由内容撑开
行内块（inline-block）：一行共存多个；宽高属性生效；宽高默认由内容撑开
盒子模型
盒子尺寸
盒子尺寸 = 内容尺寸 + 内边距尺寸 +border 尺寸。外边距 margin 不会影响盒子的大小，但会影响盒子的位置。
给盒子加 border/padding 会撑大盒子，解决方法有二：

手动做减法，减掉 border/padding 的尺寸
启动内减模式：box-sizing: border-box;

外边距问题
合并现象
垂直排列的兄弟元素，上下 margin 会合并，取两个 margin 中的较大值生效。
塌陷问题
父子级的标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动。
解决方法：

取消子级 margin，父级设置 padding（推荐）
父级设置 overflow: hidden;
父级设置 border-top

行内元素边距问题
行内元素添加 margin 和 padding，无法改变元素垂直位置。
解决方法：给行内元素添加行高（line-height）来改变垂直位置。
圆角
正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%。
div {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 100px;
  /* border-radius: 50%; */
}
胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半。
布局小技巧

行内元素、行内块元素，可以被父元素当做文本处理。
即：可以像处理文本对齐一样去处理：行内、行内块在父元素中的对齐。例如：text-align、line-height、text-indent 等。
如何让子元素，在父亲中水平居中：
若子元素为块元素，给父元素加上：margin: 0 auto;。
若子元素为行内元素、行内块元素，给父元素加上：text-align:center。
如何让子元素，在父亲中垂直居中：
若子元素为块元素，给子元素加上：margin-top，值为：(父元素 content -子元素盒子总高) / 2。
若子元素为行内元素、行内块元素：让父元素的 height = line-height，每个子元素都加上：verticalalign: middle;。
补充：若想绝对垂直居中，父元素 font-size 设置为 0。

元素之间的空白问题
产生的原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：

方案一：去掉换行和空格（不推荐）。
方案二：给父元素设置 font-size: 0，再给需要显示文字的元素，单独设置字体大小（推 
 荐）。

行内块的幽灵空白问题
产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
方案一：给行内块设置 vertical，值不为 baseline 即可，设置为 middel、bottom、top 均可。
方案二：若父元素中只有一张图片，设置图片为 display: block。
方案三：给父元素设置 font-size: 0。如果该行内块内部还有文本，则需单独设置 fontsize。
浮动（了解）
布局相关技术有：

常规流（文档流）：行级、块级、表格布局、FlexBox、Grid 布局
浮动
绝对定位

清除浮动推荐使用双伪元素法：
/* before 解决外边距塌陷问题 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

/* after 清除浮动 */
.clearfix::after {clear: both;}
Flex 布局
给父元素设置display: flex;，子元素可以自动挤压或拉伸。
组成
Flex 组成部分：

弹性容器（创建容器：display: flex;）
弹性盒子
主轴（默认在水平方向，对齐方式：justify-content）
侧轴 / 交叉轴（默认在垂直方向，对齐方式：align-items 所有弹性盒子、align-self 某个弹性盒子）

其他属性

修改主轴方向：flex-direction 属性
弹性伸缩比：flex 属性（控制弹性盒子主轴方向的尺寸，表示占用父级剩余尺寸的份数，属性值：整数数字）
弹性盒子换行：flex-wrap 属性（属性值：wrap 换行，nowrap 不换行）
行对齐方式：align-content 属性（对单行弹性盒子不生效）

定位
灵活改变盒子在网页中的位置，属性：position。设置盒子的位置用边偏移属性：left、right、top、bottom。
相对定位
改变位置的参照物是自己原来的位置，不脱标（占位），标签显示模式不变。
div {
  position: relative;
  top: 100px;
  left: 100px;
}
绝对定位

脱标（不占位）
参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，则参照浏览器可视区改位置
显示模式会改变：宽高生效，具备了行内块的特点

工作中一般不单独使用相对或绝对定位，都是配合着使用：子级绝对定位，父级相对定位（子绝父相）。
定位居中
首先设置绝对定位，水平垂直边偏移为 50%，最后 transform: translate(-50%, -50%)。
div {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}
固定定位
元素的位置在网页滚动时不会改变。

脱标（不占位）
参照物：浏览器窗口
显示模式特点：宽高生效，具备了行内块的特点

z-index
即堆叠层级，默认按照标签书写顺序，后来者居上。
z-index 默认是 0，取值越大显示顺序越靠上。
总结



定位模式
属性值
是否脱标
显示模式
参照物




相对定位
relative
否
保持标签原有显示模式
自己原来位置


绝对定位
absolute
是
行内块特点
已经定位的祖先元素；浏览器可视区


固定定位
fixed
是
行内块特点
浏览器窗口



实用代码
清除默认样式
* {
  margin: 0;
  padding: 0;
}
版心
/* 版心 */
.wrapper {
  margin: 0 auto;
  width: 1200px;
}
CSS 精灵
即 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再精确定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器压力，提高页面加载速度。
实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图

添加 background-position 属性，改变背景图位置
div {
width: 100px;
height: 100px;
background-color: pink;
background-image: url(./123.jpg);
background-position: -50px -50px;
}


字体图标
展示的是图标，本质是字体。作用是在网页中添加简单的、颜色单一的小图标。
字体图标下载：https://www.iconfont.cn/
垂直对齐方式
属性名：vertical-align，默认是基线对齐（baseline），其他属性值：top（颈部对齐）、middle（居中对齐）、bottom（顶部对齐）。
浏览器把行内块、行内标签当做文字处理，默认按基线对齐。
过渡 transition
可以为一个元素在不同状态之间切换的时候添加过渡效果。
img {
  width: 100px;
  height: 100px;
  transition: all 1s;
}

img:hover {
  width: 200px;
  height: 200px;
}
移动
平面转换 transform
平面转换又叫 2D 转换，改变盒子在平面内的形态（平移 translate()、旋转 rotate()、缩放 scale()、倾斜 skew()），一般与过渡配合使用，为元素添加动态效果。
线性渐变
属性：background-image: linear-gradient();
background-image: linear-gradient(
  渐变方向（to 方位名词 或 角度度数）,
  颜色 1 终点位置,
  颜色 2 终点位置,
  ......
);
如果不指定方向，默认从上到下渐变：

to right：从左侧开始的线性渐变
to bottom right：从左上角到右下角的线性渐变
45deg：45°的线性渐变

/* 蓝色渐变到红色 */ 
linear-gradient(blue, red);
/* 蓝色占 80% 渐变到红色 */ 
linear-gradient(blue 80%, red);
/* 多个终止色 */
linear-gradient(blue, red, yellow, green, orange);
/* 透明色 */
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
径向渐变
属性：background-image: radial-gradient();
background-image: radial-gradient(
  半径 at 圆心位置（半径可以是 2 条，则为椭圆）,
  颜色 1 终点位置,
  颜色 2 终点位置,
  ......
);
空间转换
视距 perspective
指定了观察者与 Z = 0 平面的距离，为元素添加透视效果（近大远小、近实远虚）。
perspective 属性要添加给直接父级，取值范围 800-1200（经验值）。
.father {perspective: 1000px;}

.son {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  background-color: rebeccapurple;
  transition: all 0.5s;
}
.son:hover {transform: translateZ(-300px);
}
旋转
左手法则：根据旋转方向确定取值正负。左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向。

rotateX(60deg)
rotateY(60deg)
rotateZ(60deg)

立体呈现
作用是设置元素的子元素是位于 3D 空间还是平面中，属性名：transform-style，属性值：preserve-3d（子级处于 3D 空间），flat（子级处于平面中）。
动画
动画 animation 是加强版的过渡。实现步骤：

定义动画
使用动画

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态。
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  /* 使用动画 */
  animation: change 1s;
}
/* 定义动画：宽度从 100 变化到 800 */
@keyframes change {
  from {width: 100px;}
  to {width: 800px;}
}
/* 定义动画 另一种写法 */
@keyframes change2 {
  0% {
    width: 100px;
    height: 100px;
  }
  20% {
    width: 300px;
    height: 200px;
  }
  100% {
    width: 800px;
    height: 300px;
  }
}
屏幕分辨率

物理分辨率：即硬件分辨率，出厂设置好的
逻辑分辨率：缩放调节的分辨率，由软件 / 驱动设置（写代码参考逻辑分辨率）

长度单位

px：像素
em：相对于当前元素或其父元素 font-size 的倍数
rem：相对于根元素 font-size 的倍数，html 标签就是根，1rem = 1HTML 字号大小
%：相对父元素计算

目前 rem 布局方案中，将网页等分成 10 份，HTML 标签的字号为视口宽度的 1 /10。
vw 与 vh
是相对单位，相对视口的尺寸（viewport width，viewport height）计算结果。
1vw = 1/100 视口宽度，1vh = 1/100 视口高度。
媒体查询
手机屏幕大小不同，分辨率不同，如何设置不同的 HTML 标签字号？
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式。当某个条件成立，执行对应的 CSS 样式。
@media (width: 500px) {
  body {background-color: red;}
}
完整写法（了解）
@media 媒体类型 and (媒体特性) {CSS 代码}
媒体类型用来区分设备类型：

屏幕 - screen - 带屏幕的设备
打印预览 - print - 打印原来模式
阅读器 - speech - 屏幕阅读模式
不区分类型 - all - 默认值，包括以上 3 种情形

媒体特性用来描述媒体类型的具体特征：

视口宽高 - width、height
视口最大 / 最小宽高 - max-width、max-height、min-width、min-height
屏幕方向 - orientation（portrait 竖屏、landscape 横屏）

逻辑操作符：and、only、not。
CSS 资源：

MDN：https://developer.mozilla.org/zh-CN/
W3C CSS 规范：https://www.w3.org/Style/CSS/